'use strict'
import React from 'react';
import ReactDom from 'react-dom';
import 'scss/panelPop.scss';
import Battle from 'views/panel/battle';
import Bag from 'views/panel/bag';
import Task from 'views/panel/task';
import Npc from 'views/panel/npc';

import $ from 'jquery';
class PanelPop {
    constructor() { }
    close() {
        ReactDom.unmountComponentAtNode(document.getElementById('panelPop'));
        $('#panelPop').remove();
    }
    openPanel(name, opts) {
        opts = opts || {};
        let node;
        switch (name) {
            case 'battle':
                node = <Battle opts={opts} />
                break;
            case 'bag':
                node = <Bag opts={opts} />
                break;
            case 'task':
                node = <Task opts={opts} />
                break;
            case 'npc':
                node = <Npc opts={opts} />
                break;
            default:
                console.log('界面不存在');
                return
        }

        if (!document.getElementById('panelPop')) {
            $('body').append('<div id="panelPop"></div>')
        }

        ReactDom.render(
            <div className="panelPop flex jc-center ai-center">
                <div className="bg" onClick={this.close}></div>
                <div className="content">{node}</div>
            </div>, document.getElementById('panelPop'))
    }
}

export let panelPop = new PanelPop()
